<script setup lang="jsx">
import { reactive, ref } from 'vue';
import { Button } from 'ant-design-vue';
import { parseTime } from '@/utils';
import { systemoperloglist } from '@/service/api/modules/plan';

import Modal from '@/components/common/modal.vue';
import Search from './modules/search.vue';

const searchParams = ref({
  operIp: '',
  title: '',
  operName: '',
  businessType: null,
  status: null,
  beginTime: '',
  endTime: ''
});

const pagination = reactive({
  current: 1,
  pageSize: 200,
  showSizeChanger: true,
  pageSizeOptions: ['50', '100', '200', '300', '500'],
  showQuickJumper: true,
  showTotal: total => {
    return `共${total}条`;
  },
  total: 0,
  onChange: async (current, size) => {
    pagination.current = current;
    pagination.pageSize = size;
    getData();
  }
});

const columns = ref([
  {
    key: 'index',
    dataIndex: 'index',
    title: '序号',
    width: 100,
    align: 'center',
    checked: true
  },
  {
    key: 'title',
    dataIndex: 'title',
    title: '系统模块',
    width: 260,
    align: 'center',
    checked: true,
    ellipsis: true
  },
  {
    key: 'businessType',
    dataIndex: 'businessType',
    title: '操作类型',
    width: 100,
    align: 'center',
    checked: true,
    ellipsis: true,
    customRender: ({ record }) => {
      if (record.businessType == '0') {
        return '其他';
      }
      if (record.businessType == '1') {
        return '新增';
      }
      if (record.businessType == '2') {
        return '修改';
      }
      if (record.businessType == '3') {
        return '删除';
      }
    }
  },
  {
    key: 'operName',
    dataIndex: 'operName',
    title: '操作人员',
    width: 200,
    align: 'center',
    checked: true,
    ellipsis: true
  },
  {
    key: 'operIp',
    dataIndex: 'operIp',
    title: '操作地址',
    width: 200,
    align: 'center',
    checked: true,
    ellipsis: true
  },

  {
    key: 'status',
    dataIndex: 'status',
    title: '操作状态',
    width: 200,
    align: 'center',
    checked: true,
    ellipsis: true,
    customRender: ({ record }) => {
      if (record.status == '0') {
        return '成功';
      }
      if (record.status == '1') {
        return '失败';
      }
    }
  },
  {
    key: 'costTime',
    dataIndex: 'costTime',
    title: '消耗时间',
    width: 200,
    align: 'center',
    checked: true,
    ellipsis: true,
    customRender: ({ record }) => {
      return `${record.costTime}毫秒`;
    }
  },
  {
    key: 'operTime',
    dataIndex: 'operTime',
    title: '操作时间',
    width: 200,
    align: 'center',
    checked: true,
    ellipsis: true,
    customRender: ({ record }) => {
      if (record.operTime == null) {
        return null;
      }
      return parseTime(record.operTime);
    }
  },
  {
    key: 'operate',
    dataIndex: 'operate',
    title: '操作',
    width: 200,
    align: 'center',
    checked: true,
    ellipsis: true,
    fixed: 'right',
    customRender: ({ record }) => {
      return (
        <Button type="link" size="small" onClick={() => openDetails(record)}>
          <icon-ic-round-edit class="align-sub text-icon" />
          详情
        </Button>
      );
    }
  }
]);
const tableData = ref([]);
const loading = ref(false);
const defaultExpandedRowKeys = ref([]);

function getData() {
  loading.value = true;
  systemoperloglist({
    pageSize: pagination.pageSize,
    pageNum: pagination.current,
    ...searchParams.value
  })
    // .then(({ data, error }) => {
    //   console.log(data,888888888888);
    //   if (!error) {
    //     data.rows.forEach((item, index) => {
    //       item.index = index + 1;
    //     });

    //     tableData.value = data.rows;
    //     pagination.total = data.total;
    //   }
    // })
    .then( res => {
      const data = res.otherData
      if (data.code === 200) {
        data.rows.forEach((item, index) => {
          item.index = index + 1;
        });

        tableData.value = data.rows;
        pagination.total = data.total;
      }
    })
    .finally(() => {
      loading.value = false;
    });
}

getData();

function search() {
  pagination.current = 1;
  getData();
}

const detailsVisible = ref(false);
const detailsList = ref({});
function openDetails(row) {
  detailsVisible.value = true;
  detailsList.value = row;
}

const currentRowId = ref(null);
const customRow = record => {
  return {
    style: {
      background: record.operId === currentRowId.value ? '#BAEAFA' : ''
    },
    class: record.operId === currentRowId.value ? 'jl-table-row-selected' : '',
    onClick: () => {
      currentRowId.value = record.operId;
    }
  };
};
</script>

<template>
  <div class="min-h-500px flex-col-stretch gap-16px overflow-hidden lt-sm:overflow-auto">
    <Search v-model:model="searchParams" @reset="search()" @search="search()" />
    <ACard
      :bordered="false"
      :body-style="{ flex: 1, overflow: 'hidden' }"
      class="table-card flex-col-stretch sm:flex-1-hidden card-wrapper"
    >
      <template #title>
        <!--
 <AButton type="primary" size="small" ghost class="mini-btn mr-8px" @click="add('add')">
          <template #icon>
            <icon-ic-round-add class="align-sub text-icon" />
          </template>
          <span class="ml-3px">新增</span>
        </AButton>
-->
      </template>
      <template #extra>
        <TableColumnSetting v-model:columns="columns" />
      </template>
      <STable
        :columns="columns"
        :data-source="tableData"
        size="small"
        bordered
        :loading="loading"
        :default-expanded-row-keys="defaultExpandedRowKeys"
        row-key="operId"
        :default-expand-all-rows="true"
        :scroll="{ x: 'auto', y: 'auto' }"
        :pagination="pagination"
        class="h-full"
        :row-height="23"
        :custom-row="customRow"
      />
    </ACard>

    <Modal
      v-model:visible="detailsVisible"
      :destroy-on-close="true"
      :centered="true"
      title="操作日志详细"
      width="750px"
      height="550px"
    >
      <div>
        <ADescriptions title="">
          <ADescriptionsItem :span="2" label="操作模块">{{ detailsList.title }}</ADescriptionsItem>
          <ADescriptionsItem :span="2" label="请求地址">{{ detailsList.operIp }}</ADescriptionsItem>
          <ADescriptionsItem :span="2" label="登录信息">
            {{ detailsList.operName }}/{{ detailsList.operIp }}
          </ADescriptionsItem>
          <ADescriptionsItem :span="2" label="请求方式">{{ detailsList.requestMethod }}</ADescriptionsItem>
          <ADescriptionsItem :span="3" label="操作方法">{{ detailsList.method }}</ADescriptionsItem>
          <ADescriptionsItem :span="3" label="请求参数">{{ detailsList.operParam }}</ADescriptionsItem>
          <ADescriptionsItem :span="3" label="返回参数">{{ detailsList.jsonResult }}</ADescriptionsItem>
          <ADescriptionsItem label="操作状态">{{ detailsList.status == 0 ? '成功' : '失败' }}</ADescriptionsItem>
          <ADescriptionsItem label="消耗时间">{{ detailsList.costTime + '毫秒' }}</ADescriptionsItem>
          <ADescriptionsItem label="操作时间">{{ detailsList.operTime }}</ADescriptionsItem>
        </ADescriptions>
      </div>

      <template #footer>
        <div class="modal-footer">
          <AButton @click="detailsVisible = false">关闭</AButton>
        </div>
      </template>
    </Modal>
  </div>
</template>

<style></style>
